<template>
  <div class="labelData">
    <div class="btn-box">
      <div class="text-container">
        <el-button
          size="mini"
          :class="[
            currentEventName == 'origin' ? 'activeClass' : 'defaultClass',
          ]"
          type="primary"
          @click="clickEvent('origin')"
          >原图</el-button
        >
      </div>
      <div class="text-container">
        <el-button
          size="mini"
          :class="[currentEventName == 'AI' ? 'activeClass' : 'defaultClass']"
          type="primary"
          @click="clickEvent('AI')"
          >AI</el-button
        >
      </div>
      <div class="text-container" v-if="libraryId">
        <el-button
          size="mini"
          :class="[
            currentEventName == 'scientific' ? 'activeClass' : 'defaultClass',
          ]"
          type="primary"
          @click="clickEvent('scientific')"
          >科研</el-button
        >
      </div>
      <div class="text-container" v-else>
        <el-button
          size="mini"
          :class="[
            currentEventName == 'artificial' ? 'activeClass' : 'defaultClass',
          ]"
          type="primary"
          @click="clickEvent('artificial')"
          >人工</el-button
        >
      </div>
    </div>
    <div class="tageComtaiers">
      <div v-if="currentEventName == 'AI'">
        <div v-for="(figure, index) in labelData" :key="index">
          <el-tag
            class="tag-item-box"
            :type="activeIndexInList === index ? 'danger' : 'success'"
            :closable="currentEventName != 'AI'"
            @click="handleChange(index)"
            @close="deleteElement($event, index, figure)"
          >
            {{ index + 1 }}
          </el-tag>
        </div>
      </div>
      <div v-else>
        <div class="annation-color">
          <el-select
            v-model="colorOption"
            size="mini"
            filterable
            clearable
            @change="handleFilterChange"
            @focus="getList"
          >
            <el-option
              v-for="item in selectColorOptions"
              :key="item.id"
              :label="item.featureName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </div>
        <el-tooltip
          v-for="(figure, index) in labelData"
          effect="dark"
          :key="index"
          placement="left-start"
        >
          <div
            slot="content"
            v-html="getText(figure)"
            style="max-width: 700px"
          ></div>
          <el-tag
            class="tag-item-box"
            :type="activeIndexInList === index ? 'danger' : 'success'"
            :closable="currentEventName != 'AI'"
            @click="handleChange(index)"
            @close="deleteElement($event, index, figure)"
          >
            {{ index + 1 + "." + getDiseaseNames(figure.sMarkId) }}
            <div
              :style="{
                backgroundColor: getColor(figure.sMarkId),
              }"
              class="color-box"
            ></div>
          </el-tag>
        </el-tooltip>
      </div>
    </div>
    <!-- <el-collapse v-model="activeIndexInList" accordion @change="handleChange">
            <el-collapse-item :name="index" v-for="(figure, index) in labelData" :key="index">
                <template slot="title"> -->
    <!-- <el-popconfirm confirmButtonText="确定" cancelButtonText="取消" icon="el-icon-info" iconColor="red"
                        @confirm="deleteElement(index)" title="确定删除元素？">
                        <i class="el-icon-circle-close" slot="reference" style="margin:0 10px 0 0"></i>
                    </el-popconfirm> -->
    <!-- <i class="el-icon-circle-close" style="margin:0 10px 0 0"
                        @click="deleteElement($event, index, figure)"></i>
                    <span style="margin-right:10px">{{ index + 1 }}</span>
                </template>
                <div>
                    <ul>
                        <li v-for="(point, index) in figure.points" :key="index">
                            点：({{ point.x }},{{ point.y }})
                        </li>
                    </ul>
                </div>
            </el-collapse-item>
        </el-collapse> -->
  </div>
</template>

<script>
import { listMarkIntall } from "@/api/system/tagManage";
export default {
  name: "render-data-ele",
  props: {
    labelData: {
      type: Array,
      default: () => [],
    },
    libraryId: {
      type: Number,
      default: () => null,
    },
  },
  data() {
    return {
      activeIndexInList: -1,
      currentEventName: "AI",
      colorOptions: [],
      colorOption: "",
      selectColorOptions: [],
    };
  },

  created() {
    
  },
  mounted() {
  
    setTimeout(() => {
      if (this.libraryId) {
        this.clickEvent("scientific");
      }
      this.getList();
    }, 1000);
  },
  methods: {
    getList() {
      listMarkIntall({ pageNum: 1, pageSize: 9999 }).then((response) => {
        this.colorOptions = response.rows;
        //只显示标注里标注的病种
      //  console.log(  this.colorOptions)
      // 
      // console.log("杜松啊急急急")
      // console.log(this.labelData)
        this.selectColorOptions = [];
        let mArr = Array.from(
          new Set(
            this.labelData.map((item) => {
              return item.sMarkId;
            })
          )
        );
        console.log("mArr", mArr);
        if( mArr&& mArr.length>0){
          let mArrStr=mArr.join(',')
      
          response.rows.forEach((it) => {
            if (mArrStr.indexOf(it.id)>-1) {
              this.selectColorOptions.push(it);
            }
          });
        
        }
       
        console.log("this.selectColorOptions", this.selectColorOptions);
      });
    //  console.log("执行了renderlate里的获取病种列表");
    },
    getColor(sMarkId) {
      let color = "";
      this.colorOptions.forEach((item) => {
        if (item.id == sMarkId) {
          color = item.colour;
        }
      });
      return color;
    },
    getDiseaseNames(sMarkId) {
      let name = "";
      this.colorOptions.forEach((item) => {
        if (item.id == sMarkId) {
          name = item.featureName;
        }
      });
      return name;
    },
    handleChange(val) {
      if (val === "") {
        this.activeIndexInList = -1;
      } else {
        this.activeIndexInList = val;
        this.$emit("selectedFigure", this.activeIndexInList);
      }
    },
    deleteElement(e, index, figure) {
      e.stopPropagation();
      this.$emit("deleteFigure", index, figure);
    },
    clickEvent(eventName) {
      this.currentEventName = eventName;
     
    //   setTimeout(() => {
    //   this.getList();
    // }, 1000);
      this.$emit("markShowEvent", eventName);
    },
    getText(data) {
      return `创建人:${data.nickName}<br/>创建时间:${data.createTime}`;
    },
    handleFilterChange(data) {
      this.$emit("filterMark", data);
    },
  },
};
</script>

<style scoped>
.activeClass {
  color: #fff;
}

.defaultClass {
  color: #fff;
  background-color: #4c4c4c;
}

::v-deep .el-button--mini {
  padding: 6px;
  width: 40px;
}

.text {
  height: 41px;
  text-align: center;
  line-height: 41px;
}

.labelData {
  color: white;
  height:100%;
}
.tageComtaiers{
  height:calc(100% - 40px);
  overflow-x:hidden;
  overflow-y:auto;
}
::v-deep .tageComtaiers::-webkit-scrollbar {
  display: none !important;
}
.btn-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.text-container {
  box-sizing: border-box;
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  margin-bottom: 10px;
  padding: 5px 4px;
}
.annation-color {
  width: 190px;
  padding: 5px;
}
.el-collapse {
  border: none;
  /* border-color: blue; */
}

.el-collapse {
  border: none;
  /* border-color: blue; */
}

.el-collapse-item__header {
  padding: 0 8px;
  color: white;
  background-color: #4c4c4c;
  /* border-color: blue; */
}

.el-collapse-item__wrap {
  color: white;
  background-color: #4c4c4c;
}

.el-collapse-item__content {
  color: white;
  background-color: #4c4c4c;
}

.el-input__inner {
  color: white;
  background-color: #282828;
  border: none;
}
.tag-item-box {
  margin: 5px;
  cursor: pointer;
  width: 180px;
}
.color-box {
  width: 10px;
  height: 10px;
  display: inline-block;
  border-radius: 2 px;
}
@media only screen and (max-width: 992px) {
  /* .tag-item-box {
    width: 80px;
  } */
}
@media only screen and (max-width: 550px) {
  /* .tag-item-box {
    width: 50px;
  } */
}
</style>
